<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Netty的WebSocket演示</title>
</head>
<body>

<!-- 阻止表单提交 -->
<form onsubmit="return false;">
    <input type="text" name="message" value="">
    <br /><br />
    <input type="button" value="发送" onclick="send(this.form.message.value)">
    <hr color="red" />
    <h2>收到消息</h2>
    <textarea id="responseContent" style="width:500px; height: 500px;"></textarea>
</form>
<script>
    var socket;
    if (!window.WebSocket){
        window.WebSocket = window.MozWebsocket;
    }

    if (window.WebSocket){
        socket = new WebSocket("ws://localhost:8888/websocket");

        socket.onmessage = function (event) {
            var response = document.getElementById("responseContent");
            response.value += event.data + "\r\n";
        };

        socket.onopen = function (event) {
            var response = document.getElementById("responseContent");
            response.value += "您的浏览器支持WebSocket\r\n";
        }

        socket.onclose = function (event) {
            var response = document.getElementById("responseContent");
            response.value = "连接已关闭";
        }
    }else {
        alert("您的浏览器不支持WebSocket");
    }


    function send(message) {
        if (!window.WebSocket){
            return;
        }
        if (socket.readyState == WebSocket.OPEN){
            socket.send(message);
        }else{
            alert("没有建立连接");
        }
    }
</script>
</body>
</html>